<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <link rel="stylesheet" type="text/css" href="../static/style.css">
    </head>
    
    <body>
    
        <div class="header">
            <h2>页眉</h2>
        </div>

        <div>
            <div class="column side">
                <h2> {{ doc_name}} </h2>
                <!-- 遍历一级标题 --!>
                <div class="side_nav">
                {% for key, value in doc_content.items %}
                    <div class="nav_l1" >
                        <span class="nav_l1_text"> {{ value.title }} </span>
                    </div>
                    <!-- 遍历二级标题 --!>
                    <div class="nav_l1_box" >
                    {% if value.sub_chapter != "" %}
                        {% for subkey, subvalue in value.sub_chapter.items %}
                        <div class="nav_l2">
                            <span class="nav_l2_text"> {{subvalue.title}} </span>
                        </div>
                        {% endfor %}
                    {% endif %}
                    </div>
                {% endfor %}
                </div>
            </div>

            <div class="column content">
            </div>
        </div>
    </body>

    <script src="https://gcore.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        
        // 渲染MarkDown文件
        function RenderMdFile(file) {
            $.ajax({
                url: file,
                dataType: "text",
                success: function(data) {
                    var lines = data.split("\n");
                    $('.content').html(marked.parse(lines.join('\n')))
                }
            });
        };

        $(document).ready(function() {
            
            // 读json数据，单引号转化为双引号
            var doc_name = "{{ doc_name }}"
            var doc_content = "{{doc_content|escapejs}}"
            let dicts = JSON.parse(doc_content.replaceAll("\'", "\""));
            const keys = Object.keys(dicts);
            var curr_key = keys[0];
            
            // 点击一级标题
            $('.nav_l1').click(
                function(val) {

                    // 一级标题对应的
                    for (let i = 0; i < keys.length; i++) {
                        let key = keys[i];
                        console.log(dicts[key]);
                        if (dicts[key]['title'] == $(this).children()[0].innerText) {
                            RenderMdFile("../static/docs/gjb7714/"+dicts[key]['file_name'])
                            curr_key = key;
                            break;
                        }
                    } 

                    //如果二级导航没打开，打开它
                    if ($(this).next().is(":hidden")) {
                        $(this).next().show(500);
                    }
                    else if($(this).next().children().length==0){}//如果没有二级导航，没操作
                    else{//如果二级导航打开了，关闭它
                        $(this).next().hide(500)
                    }	
                }
            );

            $('.nav_l2').click(
                function(val) {
                    subdicts = dicts[curr_key]['sub_chapter']
                    const subkeys = Object.keys(subdicts);
                     for (let i = 0; i < subkeys.length; i++) {
                        let key = subkeys[i];
                         if (subdicts[key]['title'] == $(this).children()[0].innerText) {
                            RenderMdFile("../static/docs/gjb7714/"+subdicts[key]['file_name'])
                            break;
                        }
                     }
                }
            )
        })
    </script>
</html>

